<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />

    <title>添加订单</title>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" method="post" action="${empty order ? 'order/insert' : 'order/update'}" id="orderForm">
        <!-- 隐藏域 ，订单状态-->
        <input type="hidden" name="orderStatus" value="1">

        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">发货人：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="${order.shippingName}" required="required"   placeholder="" id="shippingName" name="shippingName">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">发货人电话：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="${order.shippingPhone}" required="required"  placeholder="" id="shippingPhone" name="shippingPhone">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">发货地址：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="${order.shippingAddress}" required="required"  placeholder="" id="shippingAddress" name="shippingAddress">
                </div>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货人：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="${order.takeName}"   placeholder="收件人姓名" id="takeName" name="takeName">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货人电话：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="${order.takePhone}"  placeholder="收货人联系电话" id="takePhone" name="takePhone">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货地址：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="${order.takeAddress}"   placeholder="收货地址" id="takeAddress" name="takeAddress">
                </div>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">业务员：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="userId">
                        <c:forEach items="${saleMans}" var="saleman">
                            <option value="${saleman.userId}" ${saleman.userId==order.userId?"selected":""}>${saleman.realname}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">客户：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="customerId" id="customer">
                        <c:forEach items="${customers}" var="obj">
                            <option data-base-id="${obj.baseId}" value="${obj.customerId}" ${obj.customerId==order.customerId?"selected":""}>${obj.customerName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">到达区域：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select id="interval" name="intervalId">
                        <c:forEach items="${intervals}" var="obj">
                            <option  value="${obj.baseId}" ${obj.baseId==order.intervalId?"selected":""}>${obj.baseName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">付款方式：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="paymentMethodId">
                        <c:forEach items="${payMethods}" var="obj">
                            <option value="${obj.baseId}" ${obj.baseId==order.paymentMethodId?"selected":""}>${obj.baseName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">货运方式：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="freightMethodId">
                        <c:forEach items="${freightMethods}" var="obj">
                            <option value="${obj.baseId}" ${obj.baseId==order.freightMethodId?"selected":""}>${obj.baseName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">取件方式：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="takeMethodId">
                        <c:forEach items="${takeMethods}" var="obj">
                            <option value="${obj.baseId}" ${obj.baseId==order.takeMethodId?"selected":""}>${obj.baseName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">物流公司：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="德玛物流公司"  disabled="disabled"  name="company">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">物流单号：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="${order.orderId}"  disabled  placeholder="" id="order_Id" name="order_Id">
                    <input type="hidden" name="orderId" ${empty order?'disabled':''}  value="${order.orderId}">
                </div>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-sm-8" style="padding-left:8px">
                <label class="form-label col-xs-2 col-sm-2">订单备注：</label>
                <div class="formControls col-xs-10 col-sm-10">
                    <textarea name="orderRemark" class="textarea" >${order.orderRemark}</textarea>
                </div>
            </div>
        </div>


        <div id="orderDetails">
            <c:forEach items="${orderDetails}" var="detail">
                <div class="detail">
                    <input type="hidden" value="${detail.orderDetailId}" name="orderDetails[][orderDetailId]">
                    <input type="hidden" value="${detail.orderId}" name="orderDetails[][orderId]">
                    <input type="hidden" value="${detail.goodsName}" name="orderDetails[][goodsName]">
                    <input type="hidden" value="${detail.goodsNumber}" name="orderDetails[][goodsNumber]">
                    <input type="hidden" value="${detail.goodsUnit}" name="orderDetails[][goodsUnit]">
                    <input type="hidden" value="${detail.goodsUnitPrice}" name="orderDetails[][goodsUnitPrice]">
                    <input type="hidden" value="${detail.goodsTotal}" name="orderDetails[][goodsTotal]">
                    <textarea name="orderDetails[][goodsRemark]" style="display: none" >${detail.goodsRemark}</textarea>
                </div>
            </c:forEach>
        </div>

        <table id="goodsTable" style="margin-top: 20px" class="table table-border table-bordered table-hover table-bg">
            <thead>
                <tr>
                    <th scope="col" colspan="5">订单商品列表</th>
                    <th scope="col" colspan="1" style="text-align: center;">
                        <a title="添加商品" href="javascript:;" onclick="orderDetail_add()" style="text-decoration:none">
                            <i class="Hui-iconfont" style="color: #00B83F;font-size: 20px">&nbsp;&#xe600;</i>
                        </a>
                    </th>
                </tr>
                <tr class="text-c">
                    <th >商品名称</th>
                    <th >购买数量</th>
                    <th >单价</th>
                    <th >总价</th>
                    <th >商品描述</th>
                    <th >操作</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${orderDetails}" var="detail">
                    <tr class="text-c">
                        <td class="goodsName">${detail.goodsName}</td>
                        <td class="goodsNumber">${detail.goodsNumber}</td>
                        <td class="goodsUnitPrice">${detail.goodsUnitPrice}</td>
                        <td class="goodsTotal">${detail.goodsTotal}</td>
                        <td class="goodsRemark">${detail.goodsRemark}</td>
                        <td class="f-14">
                            <a title="商品信息修改" href="javascript:;" onclick="orderDetail_edit(${detail.orderDetailId},this)" style="text-decoration:none"><i class="Hui-iconfont" style="color: #0e90d2"></i></a>
                            <a title="删除商品" href="javascript:;" onclick="orderDetail_del(${detail.orderDetailId},this)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont" style="color: red"></i></a>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>

    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.1.11.3.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>

<script type="text/javascript" src="lib/jquery/jquery.serializejson.min.js"></script>

<script type="text/javascript">
    $("#customer").change(function () {
        changeIntervals();
    });

    var goodsTableBody=$("#goodsTable").find("tbody");
    var goodsValuesInp=$("#orderDetails");

    function orderDetail_add() {
        layer_show("新增订单商品","order/editDetail?flag=2");
    }

    var updateDetailObj=null;
    function orderDetail_edit(orderDetailId,obj) {
        updateDetailObj=obj;
        layer_show("修改订单商品","order/editDetail?flag=1&detailId="+orderDetailId);
    }

    function getDetailInfo() {
        if (updateDetailObj!=null){
            var index = $(updateDetailObj).parents("tr").index();
            var detailValues=$($("#orderDetails .detail")[index]);
            var orderDetailId=detailValues.find("input[name='orderDetails[][orderDetailId]']").val();
            var orderId=detailValues.find("input[name='orderDetails[][orderId]']").val();
            var goodsName=detailValues.find("input[name='orderDetails[][goodsName]']").val();
            var goodsNumber=detailValues.find("input[name='orderDetails[][goodsNumber]']").val();
            var goodsUnit=detailValues.find("input[name='orderDetails[][goodsUnit]']").val();
            var goodsUnitPrice=detailValues.find("input[name='orderDetails[][goodsUnitPrice]']").val();
            var goodsTotal=detailValues.find("input[name='orderDetails[][goodsTotal]']").val();
            var goodsRemark=detailValues.find("textarea").val();

            var orderDetail={
                orderDetailId:orderDetailId,
                orderId:orderId,
                goodsName:goodsName,
                goodsNumber:goodsNumber,
                goodsUnit:goodsUnit,
                goodsUnitPrice:goodsUnitPrice,
                goodsTotal:goodsTotal,
                goodsRemark:goodsRemark
            };
            return orderDetail;
        }
    }

    function addDetailInfo(orderDetail) {
        var index=$("#orderDetails .detail").length+1;
        var addHtml='<div class="detail">' +
            '<input type="hidden" value="" name="orderDetails[][orderDetailId]">' +
            '<input type="hidden" value="" name="orderDetails[][orderId]">' +
            '<input type="hidden" value="" name="orderDetails[][goodsName]">' +
            '<input type="hidden" value="" name="orderDetails[][goodsNumber]">' +
            '<input type="hidden" value="" name="orderDetails[][goodsUnit]">' +
            '<input type="hidden" value="" name="orderDetails[][goodsUnitPrice]">' +
            '<input type="hidden" value="" name="orderDetails[][goodsTotal]">' +
            '<textarea name="orderDetails[][goodsRemark]" style="display: none" ></textarea>' +
            '</div>';
        goodsValuesInp.append(addHtml);

        var detailInp=$("#orderDetails .detail:last-child");
        detailInp.find("input[name='orderDetails[][orderDetailId]']").val(orderDetail.orderDetailId);
        detailInp.find("input[name='orderDetails[][orderId]']").val(orderDetail.orderId);
        detailInp.find("input[name='orderDetails[][goodsName]']").val(orderDetail.goodsName);
        detailInp.find("input[name='orderDetails[][goodsNumber]']").val(orderDetail.goodsNumber);
        detailInp.find("input[name='orderDetails[][goodsUnit]']").val(orderDetail.goodsUnit);
        detailInp.find("input[name='orderDetails[][goodsUnitPrice]']").val(orderDetail.goodsUnitPrice);
        detailInp.find("input[name='orderDetails[][goodsTotal]']").val(orderDetail.goodsTotal);
        detailInp.find("textarea").val(orderDetail.goodsRemark);

        var addTr='<tr class="text-c">' +
            '<td class="goodsName"></td>' +
            '<td class="goodsNumber"></td>' +
            '<td class="goodsUnitPrice"></td>' +
            '<td class="goodsTotal"></td>' +
            '<td class="goodsRemark"></td>' +
            '<td class="f-14">' +
            '<a title="商品信息修改" href="javascript:;" onclick="orderDetail_edit(-1,this)" style="text-decoration:none"><i class="Hui-iconfont" style="color: #0e90d2"></i></a>' +
            '<a title="删除商品" href="javascript:;" onclick="orderDetail_del(-1,this)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont" style="color: red"></i></a>' +
            '</td>' +
            '</tr>'
        goodsTableBody.append(addTr);

        var detailTr=$("#goodsTable tbody tr:last-child")
        detailTr.find(".goodsName").html(orderDetail.goodsName);
        detailTr.find(".goodsNumber").html(orderDetail.goodsNumber);
        detailTr.find(".goodsUnitPrice").html(orderDetail.goodsUnitPrice);
        detailTr.find(".goodsTotal").html(orderDetail.goodsTotal);
        detailTr.find(".goodsRemark").html(orderDetail.goodsRemark);
    }

    function updateDetailInfo(orderDetail) {
        if (updateDetailObj!=null){
            var detailTr=$(updateDetailObj).parents("tr");
            detailTr.find(".goodsName").html(orderDetail.goodsName);
            detailTr.find(".goodsNumber").html(orderDetail.goodsNumber);
            detailTr.find(".goodsUnitPrice").html(orderDetail.goodsUnitPrice);
            detailTr.find(".goodsTotal").html(orderDetail.goodsTotal);
            detailTr.find(".goodsRemark").html(orderDetail.goodsRemark);

            var index = $(updateDetailObj).parents("tr").index();
            var detailInp=$($("#orderDetails .detail")[index]);
            detailInp.find("input[name='orderDetails[][orderDetailId]']").val(orderDetail.orderDetailId);
            detailInp.find("input[name='orderDetails[][orderId]']").val(orderDetail.orderId);
            detailInp.find("input[name='orderDetails[][goodsName]']").val(orderDetail.goodsName);
            detailInp.find("input[name='orderDetails[][goodsNumber]']").val(orderDetail.goodsNumber);
            detailInp.find("input[name='orderDetails[][goodsUnit]']").val(orderDetail.goodsUnit);
            detailInp.find("input[name='orderDetails[][goodsUnitPrice]']").val(orderDetail.goodsUnitPrice);
            detailInp.find("input[name='orderDetails[][goodsTotal]']").val(orderDetail.goodsTotal);
            detailInp.find("textarea").val(orderDetail.goodsRemark);
        }
        updateDetailObj=null;
    }
    
    function orderDetail_del(orderDetailId,obj) {
        layer.confirm("确定要删除订单内容吗?",{icon:5},function () {
            var index = $(obj).parents("tr").index();
            $(obj).parents("tr").remove();
            $($("#orderDetails .detail")[index]).remove();
            layer.msg('删除成功,提交后生效', {icon: 1,time:1000});
        })
    }

    function changeIntervals() {
        var baseId=$("#customer option:selected").data("base-id");
        var intervals=$("#interval option");
        for (var i = 0; i < intervals.length; i++) {
            if ($(intervals[i]).val()==baseId){
                intervals[i].selected=true;
                break;
            }
        }
    }

    $(function () {
        changeIntervals();
    });

    $(function(){
        $("#orderForm").validate({
            submitHandler:function(form){
                var values=$("#orderForm").serializeJSON();
                var msg=JSON.stringify(values);
                var url="order/insert";
                <c:if test="${not empty order}">
                    url="order/update";
                </c:if>
                $.ajax({
                    type:"post",
                    url: url,
                    data: msg,
                    contentType:"application/json;charset=utf-8",
                    success:function (res) {
                        layer.msg(res.msg,{icon:res.code,time:1000},function () {
                            if (1==res.code){
                                parent.refreshTable();
                                parent.layer.closeAll();
                            }
                        });
                    }
                });
            }
        })
    });

</script>
</body>
</html>